<template>
  <div id="roleAuthorization">

    <div v-if="refresh == 0"></div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>授权</el-breadcrumb-item>
      <el-breadcrumb-item>角色授权</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" class="query-form" label-width="6rem">
      <el-form-item label="业务系统">
        <el-select v-model="selectedSystem" value-key="_id" placeholder="请选择业务系统">
          <el-option v-for="item in getSystems" :key="item._id" :label="item.sysName" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统角色">
        <el-select v-model="selectedRole" placeholder="请选择系统角色">
          <el-option v-for="item in getRoles" :key="item._id" :label="item.roleName" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
      <el-form-item v-if="!isEditing && selectedSystem && selectedRole">
        <el-button type="primary" @click="isEditing=true">编辑</el-button>
      </el-form-item>
      <el-form-item v-if="isEditing">
        <el-button type="primary" @click="onSave">保存</el-button>
      </el-form-item>
      <el-form-item v-if="isEditing">
        <el-button @click="isEditing=false">取消</el-button>
      </el-form-item>
    </el-form>

    <el-transfer v-if="!isEditing" v-model="selectedPermissions" :data="permissions" :titles="['备选资源权限','授权资源权限']"></el-transfer>
    <el-transfer v-else-if="isEditing" v-model="selectedPermissionsInEdit" :data="permissions" :titles="['备选资源权限','授权资源权限']"></el-transfer>

  </div>
</template>

<style>
.query-form {
  margin-top: 20px;
  padding-top: 25px;
  background-color: #f2f2f2;
}

#roleAuthorization .el-transfer {
  margin: 20px auto;
}

#roleAuthorization .el-transfer .el-transfer-panel {
  width: calc(50% - 49px);
  height: calc(100vh - 260px);
}

#roleAuthorization .el-transfer .el-transfer-panel__list {
  height: calc(100vh - 300px);
}
</style>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { SET_ROLES, SET_PERMISSIONS_WITH_ROLE } from "../store/mutation-types";

export default {
  name: "RoleAuthorization",
  created() {
    console.log("hmx^^^^^^^|created");
    this.reqGetSystems();
    this[SET_ROLES]({ roles: [] });
    this[SET_PERMISSIONS_WITH_ROLE]({ permissionsWithRole: [] });
  },
  computed: {
    ...mapState({
      permissionsWithRole: state => state.permissions.permissionsWithRole,
      refreshCount: state => state.permissions.refreshCount
    }),
    ...mapGetters(["getSystems", "getRoles"]),
    refresh(state) {
      if (state.refreshCount > 0) {
        state.isEditing = false;
        if (this.selectedSystem && this.selectedRole) {
          this.reqGetPermissionsWithRole({
            sysId: this.selectedSystem._id,
            roleId: this.selectedRole._id
          });
        }
      }
      return state.refreshCount;
    },
    permissions(state) {
      var data = [];
      for (var row of state.permissionsWithRole) {
        data.push({
          key: row._id,
          label: `${row.permissionDescription} ${row.permissionType} ${
            row.permissionUrl
          }`
        });
      }
      return data;
    },
    selectedPermissions: {
      get(state) {
        var data = [];
        for (var row of state.permissionsWithRole) {
          if (row.authorised) {
            data.push(row._id);
          }
        }
        state.selectedPermissionsInEdit = data;
        return data;
      },
      set(curVal, oldVal) {}
    }
  },
  watch: {
    selectedSystem: {
      deep: true,
      handler: "onSelectedSystemChange"
    }
  },
  data() {
    return {
      selectedSystem: undefined,
      selectedRole: undefined,
      isEditing: false,
      selectedPermissionsInEdit: []
    };
  },
  methods: {
    ...mapMutations([SET_ROLES, SET_PERMISSIONS_WITH_ROLE]),
    ...mapActions([
      "reqGetSystems",
      "reqGetRoles",
      "reqDeleteRole",
      "reqGetPermissionsWithRole",
      "reqUpdatePermissionsWithRole"
    ]),
    onSelectedSystemChange(curVal, oldVal) {
      this.reqGetRoles({ sysId: curVal._id });
    },
    onQuery() {
      console.log("onQuery!");
      if (this.selectedSystem && this.selectedRole) {
        this.reqGetPermissionsWithRole({
          sysId: this.selectedSystem._id,
          roleId: this.selectedRole._id
        });
      } else {
        this.$message({
          message: "请选择一个业务系统并且选择一个系统角色。",
          duration: 1000,
          type: "warning"
        });
      }
    },
    onSave() {
      console.log("onSave!");
      console.log(this.selectedPermissionsInEdit);
      // debugger;
      var permissions = this.permissionsWithRole.filter(item => {
        var selected = false;
        for (var id of this.selectedPermissionsInEdit) {
          if (id === item._id) selected = true;
        }
        delete item.authorised;
        return selected && item;
      });
      var roleCode = this.selectedRole.roleCode;
      var payload = {
        roleCode,
        permissions,
        sysId: this.selectedSystem._id,
        roleId: this.selectedRole._id
      };
      console.log(payload);
      this.reqUpdatePermissionsWithRole(payload);
    }
  },
  onNeedRefresh() {
    debugger;
    this.isEditing = false;
    this.onQuery();
  }
};
</script>
